<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            margin-top: 10px;
        }
        .isosceles-triangle{
            width: 0;
            height: 0;
            border-style: solid;
            border-width: 40px 25px 40px 25px;
            border-color: blue greenyellow green red;
        }
        .right-triangle{
            width: 0;
            height: 0;
            border-style: solid;
            border-width: 0 25px 40px 25px;
            border-color: transparent transparent  transparent green;
        }

        .equilateral-triangle{
            border-bottom: 1px solid blueviolet;
            height: 100px;
            width: 100px;
            margin: 0 auto;
            box-sizing: border-box;
            position: relative;
        }
        .equilateral-triangle:before, .equilateral-triangle:after{
            content: '';
            display: block;
            width: 100px;
            height: 100px;
            box-sizing: border-box;
            position: absolute;
        }
        .equilateral-triangle:before{
            border-left: 1px solid red;
            transform-origin: left bottom;
            transform: rotate(30deg);
        }
        .equilateral-triangle:after{
            border-right: 1px solid greenyellow;
            transform-origin: right bottom;
            transform: rotate(-30deg);
        }
        .equilateral-triangle1{
            width: 0;
            height: 0;
            border-style: solid;
            border-width: 0 100px 173.2px 100px;
            border-color: transparent transparent green transparent ;
        }
    </style>
</head>
<body>

<!--等腰三角形-->
<div class="isosceles-triangle"></div>
<!--直角三角形-->
<div class="right-triangle"></div>
<!--等边三角形-空心-->
<div class="equilateral-triangle"></div>
<!--等边三角形-实心-->
<div class="equilateral-triangle1"></div>

</body>
</html>